<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        #box{width:100px;height:100px;border:1px solid #000;}
    </style>
</head>
<body>
    数字1:<input type="text" id="num1"><br>
    数字2:<input type="text" id="num2"><br>
    <hr>
    <button onclick=doNum(1)>+</button>
    <button onclick=doNum(2)>-</button>
    <button onclick=doNum(3)>*</button>
    <button onclick=doNum(4)>/</button>
    <div id="box"></div>
    

    <script>
        function doNum(a)
        {
            var num1 = document.getElementById("num1").value;

            var num2 = document.getElementById("num2").value;

            if(isNaN(num1))
            {
                alert("数字1不是数字");
                return;
            }

             if(isNaN(num2))
            {
                alert("数字2不是数字");
                return;
            }

            num1 = Number(num1);

            num2 = Number(num2);

            switch(a)
            {
                case 1:var num3 = num1+num2;break;
                case 2:var num3 = num1-num2;break;
                case 3:var num3 = num1*num2;break;
                case 4:var num3 = num1/num2;break;
            }
            

            document.getElementById("box").innerHTML = num3;
        }
    </script>
</body>
</html>